import React,{useState,useEffect} from 'react';
import styles from './Talk.module.css';
import robot from './img/机器人.png'; // 确保机器人图片路径正确
import control from './img/control.png';
import shezhi from './img/设置.png';
import {  LeftOutline } from 'antd-mobile-icons'
import axios from 'axios'
import {useNavigate} from 'react-router-dom'
import rob from '../lyf/img/机器人1.png'
import xinhao from '../lyf/img/信号.png'

export default function Talk() {
    const navigate=useNavigate()
    const [conversationCount, setConversationCount] = useState(0);

    useEffect(() => {
        const fetchConversationCount = async () => {
            try {
                const response = await axios.get('http://localhost:3000/conversations/count');
                setConversationCount(response.data.count);
            } catch (error) {
                console.error('获取对话总数失败:', error);
            }
        };
        
        fetchConversationCount();
    }, []);

    // 格式化数字显示
    const formatNumber = (num) => {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    };

    return (
        <div className={styles.container}>
        
            {/* 顶部棕色区域 */}
            <div className={styles.header}>
                <LeftOutline className={styles.back} />
                <span className={styles.title}>我的对话</span>
                <div className={styles.total}>
                    <div className={styles.number}>{formatNumber(conversationCount)}</div>
                    <div className={styles.label}>总对话数</div>
                </div>
                <div className={styles.stats}>
                    <div className={styles.card}>
                        <div className={styles.icon}><img src={rob} style={{width:'23px',marginRight:'3px'}} />32</div>
                        <div className={styles.text}>这个月离开了</div>
                    </div>

                    <div className={styles.card}>
                        <div className={styles.icon}><img src={xinhao} style={{width:'20px',marginRight:'3px'}} />较慢</div>
                        <div className={styles.text}>回应与支持</div>
                    </div>
                </div>
            </div>
            
            {/* 三个圆形按钮 */}
            <div className={styles.buttonGroup}>
                <div className={styles.laqi}>
                    <img src={control} alt="控制" />
                </div>
                <div className={styles.add} onClick={()=>navigate('/newtalk')}>
                    <p>+</p>
                </div>
                <div className={styles.shezhi}>
                    <img src={shezhi} alt="设置" />
                </div>
            </div>
            
            {/* 升级到专业版提示区域 */}
            <div className={styles.rob}>
                <div className={styles.upgradeContent}>
                    <h3 className={styles.upgradeTitle}>升级到专业版！</h3>
                    <ul className={styles.upgradeFeatures}>
                        <li>✓ 24/7实时快速支持</li>
                        <li>✓ 无限对话！！</li>
                    </ul>
                    <button className={styles.upgradeButton}>立即进入专业版！</button>
                </div>
            </div>
        </div>
    );
}